<template>
    <view class="shopassistantedit-edit-content">
        <view class="sedit-content px-24">
            <view class="title1">客户信息</view>
            <view class="container pb-32 bg-white f-28">
                <view class="cell">
                    <view class="title mr-12">手机号</view>
                    <up-input placeholder="请输入手机号" :border="'surround'" type="number" v-model="memberForm.mobile"></up-input>
                </view>
                <view class="cell">
                    <view class="title mr-12">姓名</view>
                    <up-input placeholder="请输入客户姓名" :border="'surround'" v-model="memberForm.name"></up-input>
                </view>
                <view class="cell" @click="onAreaShow">
                    <view class="title mr-12">出生日期</view>
                    <up-input placeholder="请选择出生日期" :border="'surround'" v-model="memberForm.birthday" disabled
                        style="pointer-events: none;" @click="onAreaShow">
                    </up-input>
                </view>
            </view>
        </view>
        <view class="button-box px-48">
			<view class="exit-login" @click="onAddEditMember">
                <up-loading-icon class="loading" color="#fff" size="16" :show="loading"></up-loading-icon><text>保存</text>
            </view>
		</view>
        <up-datetime-picker
            :show="show"
            v-model="value1"
            mode="date"
            title="选择出生日期"
            minDate="1930-01-01"
            maxDate="2025-01-01"
            @cancel="cancel" @confirm="confirm" @change="change"
        ></up-datetime-picker>
    </view>
</template>

<script setup>
import { computed, ref, reactive, onBeforeMount, unref } from 'vue';
import { shopApi } from "@/api";
import test from '@/superant/helper/test.js';
import $helper from '@/superant/helper';
import {formatDate} from '@/utils/util';
const memberForm = reactive({
    birthday:'',
    mobile:'',
    name:'',
});
let show = ref(false);
let loading=ref(false)
let value1 = ref('2020-01-01');
const datetimePickerRef = ref(null);
onLoad((options) => {
    // console.log("url参数", options);
    uni.setNavigationBarTitle({
        title: options.item ? "编辑会员资料" : "添加会员"
    });
    // 编辑回显
    if (options.item) {
        // console.log(JSON.parse(options.item))
        memberForm.birthday = JSON.parse(options.item).birthday;
        memberForm.mobile=JSON.parse(options.item).mobile
        memberForm.userId=JSON.parse(options.item).userId
        memberForm.name=JSON.parse(options.item).name
    }
});

const onAreaShow = () => {
    show.value = true;
};
const change = (e)=>{
    console.log('change', e);
}
const confirm=(e)=>{
    memberForm.birthday = formatDate(e.value)
    show.value = false
}
const cancel = ()=>{
    // console.log('cancel');
    show.value = false
}
const onAddEditMember = () => {
    if (memberForm.name.trim() == "") {
        uni.showToast({
            title: "请输入姓名",
            icon: "none",
            mask: true
        });
        return;
    }
    if (memberForm.mobile.trim() == "") {
        uni.showToast({
            title: "请输入手机号",
            icon: "none",
            mask: true
        });
        return;
    }
    if (!test.mobile(memberForm.mobile)) {
        $helper.toast('请输入正确的手机号');
        return;
    }
    if (memberForm.birthday== "") {
        uni.showToast({
            title: "请选择出生日期",
            icon: "none",
            mask: true
        });
        return;
    }
    let params = {
        birthday:memberForm.birthday,
        mobile:memberForm.mobile,
        name:memberForm.name,
    }
    if (memberForm.userId) {
        params.userId = memberForm.userId;
    }
    loading.value=true
    shopApi.SHOPSAVEORUPDATEMEMBER(params).then((res) => {
        loading.value=false
        if (res.code == 200) {
            if (memberForm.userId) {
                uni.showToast({
                    title: "修改成功",
                    icon: "success",
                    mask: true
                });
            } else {
                uni.showToast({
                    title: "新增成功",
                    icon: "success",
                    mask: true
                });
            }
            uni.navigateBack();
        }else{
            uni.showToast({
                title: res.errMsg,
                icon: "none",
                mask: true
            });
        }
    });

};
</script>

<style lang="scss">
page {
    background-color: #f3f3f3;
}
</style>
<style lang="scss" scoped>
.shopassistantedit-edit-content {
    padding: 24rpx;
    box-sizing: border-box;
    .sedit-content{
        background-color: #ffffff;
        border-radius: 24rpx;
        padding: 24rpx;
        box-sizing: border-box;
        .title1{
            font-family: PingFang SC;
            font-size: 12px;
            font-weight: 400;
            line-height: 20px;
            text-align: left;
            color: rgba(0, 0, 0, 0.6);
        }
    }

    .cell {
        display: flex;
        align-items: center;
        padding: 20rpx 0rpx;
        // border-bottom: 2rpx solid #E6E6E6;

        .title {
            width: 140rpx;
            font-family: PingFang SC;
            font-size: 12px;
            font-weight: 400;
            line-height: 20px;
            text-align: left;
            color: rgba(0, 0, 0, 0.6);
        }
        .choosetit{
            font-family: PingFang SC;
            font-size: 16px;
            font-weight: 400;
            line-height: 24px;
            text-align: left;
            color: rgba(255, 0, 0, 1);
        }
    }

    .icon-width {
        width: 40rpx;
        height: 40rpx;
        vertical-align: text-top;
    }

    .default-tip {
        color: #606266;
        vertical-align: text-top;
    }

    .button-box{
		width: 100%;
		position: fixed;
		bottom: 70rpx;
		left: 0;
	}
	.exit-login {
		width: 654rpx;
		height: 92rpx;
		line-height: 92rpx;
		background: #D68E44;
		color: #ffffff;
		text-align: center;
		border-radius: 64px;
		font-size: 32rpx;
		margin-bottom: 40rpx;
        display: flex;
        align-items: center;
        justify-content: center;
	}
	.exit-login:after {
		border: none;
	}

    & :deep(.u-input) {
        border: 0;
        background: #ffffff !important;
    }

    & :deep(.uni-input-wrapper) {
        font-size: 28rpx;
    }

    & :deep(.u-textarea) {
        border: 0;
    }
}
</style>